<script lang="ts" setup>
import { ref } from 'vue'

import type { VxeGridListeners, VxeGridProps } from '#/adapter/vxe-table'

import type { VbenFormProps } from '#/adapter/form'
import { useVbenVxeGrid } from '#/adapter/vxe-table'
import { useVbenModal } from '@vben/common-ui'
import { getSkuList } from '#/api/revicedRecord'

const data = ref<any>({
  query: {
    quick_search: '',
    in_stock: 0,
  },
  visibleFields: [],
})
const emit = defineEmits(['share-data'])

interface RowType {
  address: string
  age: number
  id: number
  name: string
  nickname: string
  role: string
}

const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: true,
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: '输入供应商或物料名称',
      },
      fieldName: 'quick_search',
      label: '快速查询',
    },
    {
      component: 'Switch',
      fieldName: 'in_stock',
      label: '仅看有库存',
      componentProps: {
        class: 'w-[50px]',
        checkedValue: 1,
        unCheckedValue: 0,
      },
    },
  ],
  showCollapseButton: true,
  submitButtonOptions: {
    content: '查询',
  },
  submitOnChange: false,
  submitOnEnter: true,
}

const gridOptions: VxeGridProps<RowType> = {
  checkboxConfig: {
    highlight: true,
    reserve: true,
    showReserveStatus: true,
  },
  height: '600px',
  columns: [
    { type: 'checkbox', width: 70, fixed: 'left' },
    { field: 'material_name', title: '物料名称', minWidth: 150 },
    { field: 'supply_name', title: '供应商', minWidth: 120 },
    { field: 'material_color', title: '颜色', width: 70 },
    { field: 'price', title: '单价', width: 100 },
    { field: 'unit', title: '单位', width: 60 },
    { field: 'stock', title: '库存', width: 80 },
    { field: 'confirm_num', title: '采购数量', width: 100 },
    { field: 'less_num', title: '应收数量', width: 100 },
    { field: 'cloth_width', title: '幅宽', width: 70 },
    { field: 'gram_weight', title: '克重', width: 70 },
  ],
  //   data: [],
  proxyConfig: {
    autoLoad: false,
    ajax: {
      query: async ({ page }, formValues) => {
        const { bom_list } = await getSkuList({
          ...data.value.query,
          ...formValues,
          page: page.currentPage,
          pageSize: page.pageSize,
        })

        return {
          items: bom_list,
          total: bom_list.length,
        }
      },
    },
  },
}

const gridEvents: VxeGridListeners<RowType> = {
  cellClick: ({ row }) => {
    // message.info(`cell-click: ${row.name}`);
  },
}

const [Modal, modalApi] = useVbenModal({
  class: 'w-2/3',

  onCancel() {
    modalApi.close()
  },
  destroyOnClose: true,
  onOpened() {
    if (data.value.visibleFields && data.value.visibleFields.length > 0) {
      const column = gridApi.grid.getColumnByField('less_num')
      if (column) {
        column.visible = false
        gridApi.grid.refreshColumn()
      }
    }
    gridApi.formApi.setValues({ in_stock: data.value.query.in_stock })
    gridApi.reload()
  },
  onConfirm() {
    const checkData = gridApi.grid.getCheckboxRecords()
    emit('share-data', { list: checkData || [] })
    modalApi.close()
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      data.value = { ...data.value, ...modalApi.getData<Record<string, any>>() }
    }
  },
})
const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridEvents, gridOptions })
</script>
<template>
  <Modal title="物料列表">
    <Grid></Grid>
  </Modal>
</template>
